<template>
  <border-box>
    <dv-card :content-bg="require('@/assets/6gfm/bj.png')">
      <template v-slot:header>
        <DvTitle1> 总体指标 </DvTitle1>
      </template>
      <div class="dv-card-content">
        <dv-card
          class="mb-5"
          style="width: 889px; height: 205px; grid-template-rows: 10px auto"
          :card-bg="require('@/assets/5dhz/1bj.png')"
        >
          <div style="text-align: center; position: relative">
            <div class="allIndexCharts">
              <radar
                eleId="bar15"
                width="450"
                height="110"
                :background="false"
                :color="['#00A1FF', '#5CE0E2']"
                :round="false"
                :area="true"
              ></radar>
            </div>
            <Image
              :src="require('@/assets/components/board/a1.png')"
              width="840"
            ></Image>
          </div>
        </dv-card>
      </div>
    </dv-card>
  </border-box>
</template>

<script>
import BorderBox from "@/components/BorderBox1";
import DvCard from "@/components/DvCard";
import DvTitle1 from "@/components/DvTitle1";
import Image from "@/components/Image";
import Radar from "@/components/charts/Bar";
import { ref } from "vue";
export default {
  name: "SixWork",
  components: {
    DvTitle1,
    DvCard,
    BorderBox,
    Image,
    Radar,
  },
  setup() {
    const list = ref([{ title: "", icon: "" }]);
    list.value = [
      {
        title: "聚焦科技创新，增强发展竞争力",
        icon: require("@/assets/6gfm/1.png"),
      },
      {
        title: "聚焦融合发展，提升城乡现代化品质",
        icon: require("@/assets/6gfm/2.png"),
      },
      {
        title: "聚焦产业现代化，推动经济高质量发展",
        icon: require("@/assets/6gfm/3.png"),
      },
      {
        title: "聚焦整体智治，促进市域治理现代化",
        icon: require("@/assets/6gfm/4.png"),
      },
      {
        title: "聚焦畅通双循环，构建开放发展新格局",
        icon: require("@/assets/6gfm/5.png"),
      },
      {
        title: "聚焦共同富裕，持续扩大民生福祉",
        icon: require("@/assets/6gfm/6.png"),
      },
    ];
    return { list };
  },
};
</script>

<style scoped lang="scss">
.dv-card-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 411px);
  grid-gap: 20px 20px;
  justify-content: space-between;
}
.allIndexCharts {
  position: absolute;
  right: 0;
}
</style>
